<meta charset="UTF-8">
<link href="../../vendors/iview/css/iview.css" rel="stylesheet"/>
<link rel="stylesheet" href="../../styles/common.css">
<link rel="stylesheet" href="../../styles/home.css">
<!--右边内容自适应-->
<div class="home">
    <!--   右边第一块-->
    <div class="home-one">
        <div class="home-one-left" style="height:100%;">
            <div class="one-left-top"><h2>Welcome</h2><p>欢迎使用正大鸿二手房管理系统！</p>
                <span>+</span>
            </div>
            <div class="one-left-bottom">
                <h1>
                    <span></span>
                    <p>用户名</p>
                </h1>
                <h2>
                    <a href="javascript:;">修改资料</a>
                    <span>在线申请单</span>
                    <span>今日任务</span>
                    <span>我的申请单</span>
                    <span>消息通知</span>
                    <span>待执行申请单</span>
                </h2>
            </div>
        </div>
        <div class="home-one-center">
            <h2>数据统计</h2>

            <div class="box">
                <ul>
                    <li class="one-li"><span>时段</span><span>业绩</span><span>套数</span><span>带看</span><span>客源（新增／放弃）</span><span>跟进</span></li>
                    <li class="two-li"><span>今日</span><span><i>0</i>万元</span><span><i>11</i>套</span><span><i>11</i>套</span><span><i>0</i>/0</span><span>0</span></li>
                    <li class="two-li"><span>今日</span><span><i>0</i>万元</span><span><i>11</i>套</span><span><i>11</i>套</span><span><i>0</i>/0</span><span>0</span></li>
                    <li class="two-li"><span>今日</span><span><i>0</i>万元</span><span><i>11</i>套</span><span><i>11</i>套</span><span><i>0</i>/0</span><span>0</span></li>
                    <li class="two-li"><span>今日</span><span><i>0</i>万元</span><span><i>11</i>套</span><span><i>11</i>套</span><span><i>0</i>/0</span><span>0</span></li>
                    <li class="two-li"><span>今日</span><span><i>0</i>万元</span><span><i>11</i>套</span><span><i>11</i>套</span><span><i>0</i>/0</span><span>0</span></li>
                    <li class="two-li"><span>今日</span><span><i>0</i>万元</span><span><i>11</i>套</span><span><i>11</i>套</span><span><i>0</i>/0</span><span>0</span></li>
                </ul>
            </div>
        </div>
        <div class="home-one-right">
            <h2>业绩排行</h2>
            <div class="box">
                <ul>
                    <li class="one-li"><span>姓名</span><span>业绩套数</span><span>销售额</span></li>
                    <li class="two-li"><span><i> 1</i>张三</span><span><em>1</em>套</span><span>7473万元</span></li>
                    <li class="three-li"><span><i> 2</i>张三</span><span><em>51</em>套</span><span>7473万元</span></li>
                    <li class="four-li"><span><i> 3</i>张三</span><span><em>51</em>套</span><span>7473万元</span></li>
                    <li><span><i> 4</i>张三</span><span><em>5</em>套</span><span>7473万元</span></li>
                    <li><span><i> 5</i>张三</span><span><em>5</em>套</span><span>7473万元</span></li>
                    <li><span><i> 5</i>张三</span><span><em>5</em>套</span><span>7473万元</span></li>
                </ul>
            </div>
        </div>
    </div>
    <!--右边第二块-->
    <div class="home-two">
        <div class="home-two-left">
            <div class="chartTitle" id="app">
                <h2>
                    数据统计
                </h2>
                <h3>更多<div class="diandian"></div></h3>
                <i-select v-model="dateModel" style="width:20%">
                    <i-option v-for="item in dateList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </div>

            <div id="main" style="width:100%;height:90%;float:left;position:relative;"></div>


        </div>
        <div class="home-two-right">
            <h2>本月支出</h2>
            <h3>更多<div class="diandian"></div></h3>
            <div id="main1" style="width:100%;height:90%;float:left;position:relative;"></div>
        </div>
    </div>
    <!--  右边第三块-->
    <div class="home-three">
        <div class="home-three-one">
            <h2>公司经营分析</h2>
            <h3>更多<div class="diandian"></div></h3>
            <div id="main2" style="width:100%;height:90%;float:left;position:relative;"></div>
        </div>
    </div>
    <!--   右边第四块-->
    <div class="home-four">
        <div class="home-four-left">
            <h2>
                甲方欠款排行榜
            </h2>
            <h3>更多<div class="diandian"></div></h3>
            <div id="main3" style="width:100%;height:90%;float:left;position:relative;"></div>
        </div>
        <div class="home-four-right">
            <h2>客户来源分析</h2>
            <h3>更多<div class="diandian"></div></h3>
            <div id="main4" style="width:100%;height:90%;float:left;position:relative; "></div>
        </div>


    </div>

</div>
<!--最大化最小化关闭js-->
<!--图表js-->

<script src="../../vendors/jquery.js"></script>
<script src="../../vendors/vue/vue.min.js"></script>
<script src="../../vendors/iview/js/iview.js"></script>
<script src="../../vendors/echarts.common.min.js"></script>
<script src="../../vendors/homeChart.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            dateList: [
                {
                    value: '2017年6月',
                    label: '2017年6月'
                },
                {
                    value: '2017年7月',
                    label: '2017年7月'
                },
                {
                    value: '2017年8月',
                    label: '2017年8月'
                }

            ],
            dateModel: ''
        },
    })
</script>

